<script setup lang="ts"></script>
<template>
  <div class="checkout-header-container">
    <div class="container-core">
      <div class="checkout-header">
        <div class="checkout-title">Checkout</div>
        <div class="view">
          <ap-link href="#">View Order: RMB 4,999</ap-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.checkout-header-container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 4;
  // background: rgba(255, 255, 255, .5);
  // backdrop-filter: blur(5px);
  background: #FFFFFF;
  border-bottom: 1px solid #D7D7D7;
  .checkout-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .checkout-title {
      font-weight: bold;
    }
  }
}

// Mobile
@media screen and (max-width: 767px) {
  .checkout-header-container {
    top: 45px;
    .checkout-header {
      height: 45px;
      .checkout-title {
        font-size: 22px;
      }
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .checkout-header-container {
    top: 45px;
    .checkout-header {
      height: 45px;
      .checkout-title {
        font-size: 22px;
      }
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .checkout-header-container {
    top: 60Px;
    border-bottom-width: 1Px;
    .checkout-header {
      height: 60Px;
      .checkout-title {
        font-size: 22Px;
      }
    }
  }
}
</style>